<template>
	<view class="customerForm">
		<uni-forms ref="baseForm" :modelValue="formData" :rules="rules" label-width="90px">
			<uni-forms-item label="商品名称" required name="cInvName">
				<uni-easyinput v-model="formData.cInvName" placeholder="请输入商品名称" />
			</uni-forms-item>
			<uni-forms-item label="商品编码">
				<uni-easyinput v-model="formData.cInvCode" placeholder="请输入商品编码" />
			</uni-forms-item>
			<uni-forms-item label="商品规格">
				<uni-easyinput v-model="formData.cInvStd" placeholder="请输入商品规格" />
			</uni-forms-item>
			<uni-forms-item label="商品单位">
				<uni-easyinput v-model="formData.GroupName" placeholder="请输入商品单位" />
			</uni-forms-item>
			<uni-forms-item label="销售价格" required name="iInvRCost">
				<uni-easyinput type="number" v-model="formData.iInvRCost" placeholder="请输入销售价格" />
			</uni-forms-item>
			<uni-forms-item :label="AccountingperiodDays" required name="iInvRCostOne">
				<uni-easyinput type="number" v-model="formData.iInvRCostOne" placeholder="请输入账期一价格" />
			</uni-forms-item>
			<uni-forms-item :label="Accountingperiod2Days" required name="iInvRCostTwo">
				<uni-easyinput type="number" v-model="formData.iInvRCostTwo" placeholder="请输入账期二价格" />
			</uni-forms-item>
			<uni-forms-item :label="Accountingperiod3Days" required name="iInvRCostThree">
				<uni-easyinput type="number" v-model="formData.iInvRCostThree" placeholder="请输入账期三价格" />
			</uni-forms-item>
			<uni-forms-item label="商品图片">
				<uni-file-picker ref="ufile" v-model="iconList" fileMediatype="image" mode="grid" @select="select"
					limit="1" @delete="delImage" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit">保 存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				AccountingperiodDays: "",
				Accountingperiod2Days: "",
				Accountingperiod3Days: "",
				// 获取缓存的店铺信息
				shopInfo: {},
				formData: {},
				rules: {
					cInvCode: {
						rules: [{
							required: true,
							errorMessage: '请输入商品编码',
						}]
					},
					cInvName: {
						rules: [{
							required: true,
							errorMessage: '请输入商品名称',
						}]
					},
					cInvStd: {
						rules: [{
							required: true,
							errorMessage: '请输入商品规格',
						}]
					},
					Weight: {
						rules: [{
							required: true,
							errorMessage: '请输入重量(KG)',
						}]
					},
					iInvRCost: {
						rules: [{
							required: true,
							errorMessage: '请输入销售价格',
						}]
					},
					iInvRCostOne: {
						rules: [{
							required: true,
							errorMessage: '请输入账期一价格',
						}]
					},
					iInvRCostTwo: {
						rules: [{
							required: true,
							errorMessage: '请输入账期二价格',
						}]
					},
					iInvRCostThree: {
						rules: [{
							required: true,
							errorMessage: '请输入账期三价格',
						}]
					},
				},
				iconList: []
			}
		},
		onLoad(query) {
			// 获取当前店铺信息
			// this.shopInfo = uni.getStorageSync('shopInfo')
			// console.log('获取缓存店铺信息',JSON.parse(this.shopInfo)  );
			if (query.Id) {
				this.getTheData(query.Id)
				uni.setNavigationBarTitle({
					title: '编辑商品'
				})
			} else {
				uni.setNavigationBarTitle({
					title: "新增商品 [ " + query.name + " ]"
				})
				uni.getStorage({
					key: 'CompanyInfo'
				}).then(res => {
					this.GetCompanyDays(res[1].data.Id)
				})
			}
			this.formData.CompanyId = uni.getStorageSync('CompanyInfo').Id
			this.formData.TypeId = query.pid

		},
		methods: {
			// 删除图片
			delImage(e) {
				this.formData.Picture = ''
			},
			// 上传
			select(e) {
				uni.showLoading({
					title: '图片上传中...',
					mask: true
				})
				uni.compressImage({
					src: e.tempFilePaths[0],
					quality: 5,
					success: res => {
						uni.showLoading({
							title: '图片上传中...'
						})
						console.log(res);
						uni.uploadFile({
							url: this.$baseUrl + '/Base_Manage/Upload/UploadFileProductByForm',
							filePath: res.tempFilePath,
							header: {
								'Authorization': uni.getStorageSync('tokenKey')
							},
							name: 'file',
							success: (result) => {
								console.log(result);
								uni.hideLoading()
								if (result.statusCode !== 200) {
									uni.showToast({
										icon: 'none',
										title: '网络连接失败,请重试'
									})
									this.$refs.ufile.clearFiles()
									return
								}
								console.log(JSON.parse(result.data).thumbUrl);
								this.formData.Picture = JSON.parse(result.data).thumbUrl
							},
						})
					}
				})
			},
			getTheData(id) {
				this.$http("post", "/BO/Inventory/GetTheData", {
					id
				}).then((res) => {
					if (res.Success) {
						this.formData = res.Data;
						if (this.formData.Picture) {
							this.iconList = [{
								url: this.formData.Picture
							}]
						}

						// 获取账期的价格
						this.GetCompanyDays(res.Data.CompanyId)
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				});
			},
			// 获取账期的价格
			GetCompanyDays(CompanyId) {
				console.log('获取价格桉树', CompanyId)
				this.$http("post", "/Base_Manage/Base_Company/GetCompanyDays?companyId=" + CompanyId).then((res) => {
					if (res.Success) {
						console.log('获取账期价格', res.Data)
						if (res.Data) {
							this.AccountingperiodDays = '账期' + res.Data.AccountingperiodDays + '价格'
							this.Accountingperiod2Days = '账期' + res.Data.Accountingperiod2Days + '价格'
							this.Accountingperiod3Days = '账期' + res.Data.Accountingperiod3Days + '价格'
						}

					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				});
			},
			submit() {
				this.$refs['baseForm'].validate().then(res => {
					// if (!this.formData.Picture) return this.$api.msg('请上传商品图片')
					uni.showLoading({
						mask: true
					})
					console.log(this.formData);
					this.$http('post', "/BO/Inventory/saveData", this.formData)
						.then((res) => {
							uni.hideLoading()
							if (res.Success) {
								uni.showToast({
									icon: 'none',
									title: '保存成功'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							} else uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						});
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customerForm {
		padding: 20rpx;
		box-sizing: border-box;

		.upload {
			width: 70px;
			height: 70px;
			border-radius: 5px;
			border: 2px dashed #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.upload:active {
			border-color: #007aff;
			color: #007aff;
		}
	}
</style>